<template>
  <scroll-view
    class="product-scroll"
    scroll-y="true"
    @scrolltolower="toLoadMore"
  >
    <view class="product-list">
      <view
        class="product-item"
        v-for="(item, index) in goodsList"
        @click.stop="handleItem(item.id)"
        :key="index"
        :style="[goodsItemSpace]"
      >
        <view class="product-pic">
          <image lazy-load :src="item.cover_pic" mode="aspectFill" />
          <goodsSaleNo
            :imgHeight="'16.8vw'"
            :goodsInfo="item"
            :imgMode="'heightFix'"
          ></goodsSaleNo>
        </view>
        <view class="goods-info">
          <view
            class="goods-title"
            :style="{ color: propsData.params.producNameColor }"
          >
            <text class="goods-pt">
              <template v-if="item.party_type == 0">
                {{ item.party_size }}人团
              </template>
              <template v-else> {{ item.party_goods_count }}件成团 </template>
            </text>
            {{ item.name }}</view
          >

          <view class="info-down">
            <view class="price-box">
              <view
                class="price"
                :style="{ color: propsData.params.priceColor }"
              >
                <view>￥</view>
                <view>{{ item.pt_price | priceBeforeZero }}</view>
                <view>{{ item.pt_price | priceAfterZero }}</view>
              </view>
              <view
                class="origin-price"
                v-if="showPrice"
                :style="{ color: propsData.params.originPriceColor }"
                >￥{{ item.price }}</view
              >
            </view>
            <view
              class="goods-sales"
              :style="{ color: propsData.params.saleColor }"
              v-if="showSales"
              >{{ "已拼 " + item.sale_num }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { diyMixin } from "../../mixins/diy";
import goodsSaleNo from "@/components/goodsSaleNo/index.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    goodsList: {
      type: Array,
      default: [],
    },
    goodsItemSpace: {
      type: Object,
      default: {},
    },
  },
  mixins: [diyMixin], //混入文件
  components: {
    goodsSaleNo,
  },

  computed: {
    showPrice() {
      return this.propsData.params.showPrice;
    },
    showSales() {
      return this.propsData.params.showSales;
    },
  },

  methods: {
    handleItem(id) {
      this.$emit("toGoodDetail", { id });
    },
    toLoadMore() {
      this.$emit("scrollToEnd");
    },
  },
};
</script>

<style scoped lang="scss">
.product-scroll {
  width: 100%;
  overflow: hidden;

  .product-list {
    width: 100%;
  }
  .product-item {
    display: flex;
    align-items: center;
    padding: 2.27%;
    background-color: #ffffff;
    border-radius: 1.34vw;
    overflow: hidden;
    .product-pic {
      width: 25.64%;
      height: 24vw;
      border-radius: 1.34vw;
      overflow: hidden;
      margin-right: 3.41%;
      position: relative;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .goods-info {
      width: 69.8%;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      .goods-title {
        width: 91.43%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(29, 29, 29, 0.94);
        word-break: break-all;
      }
      .info-down {
        width: 91.43%;
        position: relative;
        margin-top: 2.134vw;
        .price-box {
          display: flex;
          align-items: flex-end;
          .price {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 600;
            line-height: 1;
            color: #fa2c1b;
            display: flex;
            align-items: flex-end;
            view:nth-child(2) {
              font-size: 38rpx;
            }
          }
          .origin-price {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #9b9b9b;
            display: inline-block;
            text-decoration: line-through;
            margin-left: 1.67vw;
          }
        }
        .goods-sales {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #9b9b9b;
          margin-top: 2.134vw;
        }
      }
    }
  }
  .product-item:last-child {
    margin-bottom: 0;
  }
}
.product-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.goods-seckill {
  width: 91.43%;
  display: flex;
  align-items: center;
  height: 40rpx;
  color: #ff5c26;
  font-size: 24rpx;
  overflow: hidden;
}

.goods-pt {
  margin-right: 6rpx;
  padding: 0 8rpx;
  display: inline-block;
  border-radius: 3px;
  background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
  font-size: 24rpx;
  color: #fff;
}
</style>
